ggplot2-এ theme() ফাংশন ব্যবহার করে গ্রাফের কাস্টম থিম তৈরি করা যায়, যেখানে গ্রাফের রং, ফন্ট, লেআউট ইত্যাদি কাস্টমাইজ করা যায়। গুগল চার্টে Theme ফাংশন সরাসরি ব্যবহৃত না হলেও, আপনি গুগল চার্টের ভিজ্যুয়াল উপাদানগুলির কাস্টমাইজেশন করতে options অবজেক্ট ব্যবহার করে থিম তৈরি করতে পারেন। গুগল চার্টে options অবজেক্টের মাধ্যমে আপনি থিম কাস্টমাইজ করতে পারেন, যেখানে শিরোনাম, অক্ষের স্টাইল, রঙ, ফন্ট, গ্রিড এবং অন্যান্য ভিজ্যুয়াল উপাদান নির্ধারণ করা যায়।
এখানে, গুগল চার্টে custom themes তৈরি করার জন্য কিছু গুরুত্বপূর্ণ কাস্টমাইজেশন অপশন এবং থিম তৈরির পদ্ধতি আলোচনা করা হবে।
১. গুগল চার্টের options অবজেক্টের মাধ্যমে কাস্টম থিম তৈরি
গুগল চার্টে options অবজেক্টের মাধ্যমে গ্রাফের শিরোনাম, অক্ষের রঙ, ফন্ট, এবং অন্যান্য স্টাইল কাস্টমাইজ করা যায়। নিচে বিভিন্ন কাস্টম থিম তৈরির উপায় দেখানো হয়েছে।
উদাহরণ: Scatter Chart with Custom Theme
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'scatter']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Weight', 'Mileage'],
[2.620, 21.0],
[2.875, 22.8],
[3.215, 18.7],
[3.440, 17.3],
[3.570, 15.0]
]);
var options = {
title: 'Weight vs Mileage',
hAxis: {
title: 'Weight',
titleTextStyle: {color: 'blue', fontSize: 16}, // Custom X-axis title style
gridlines: {color: 'gray', count: 4} // Custom gridlines
},
vAxis: {
title: 'Mileage',
titleTextStyle: {color: 'green', fontSize: 16}, // Custom Y-axis title style
gridlines: {color: 'gray', count: 4} // Custom gridlines
},
backgroundColor: '#f1f1f1', // Custom background color
legend: {position: 'top', textStyle: {fontSize: 12, color: 'red'}}, // Custom legend style
colors: ['#76A7FF'] // Custom point color
};
var chart = new google.visualization.ScatterChart(document.getElementById('scatter_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="scatter_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- hAxis এবং vAxis এর শিরোনাম স্টাইল কাস্টমাইজ করা হয়েছে (রঙ, ফন্ট সাইজ)।
- gridlines এর রঙ এবং সংখ্যা কাস্টমাইজ করা হয়েছে।
- backgroundColor ব্যবহার করে গ্রাফের ব্যাকগ্রাউন্ডের রঙ পরিবর্তন করা হয়েছে।
- legend এর স্টাইল এবং অবস্থান কাস্টমাইজ করা হয়েছে।
- colors এর মাধ্যমে পয়েন্টের রঙ পরিবর্তন করা হয়েছে।
২. গুগল চার্টে Theme কাস্টমাইজেশনের মাধ্যমে আরও উন্নত থিম তৈরি
গুগল চার্টে আরও বেশি কাস্টম থিম তৈরি করতে, আপনি chart area, title, axis, এবং legend সহ অনেক ভিজ্যুয়াল উপাদান কাস্টমাইজ করতে পারেন। যেমন:
উদাহরণ: Column Chart with Custom Theme
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Product', 'Sales'],
['Product A', 1000],
['Product B', 1200],
['Product C', 1500]
]);
var options = {
title: 'Product Sales',
chartArea: {
backgroundColor: '#f4f4f4', // Custom chart area background color
width: '70%', // Adjust chart area width
height: '70%' // Adjust chart area height
},
hAxis: {
title: 'Products',
titleTextStyle: {color: '#5A5A5A', fontSize: 14}, // Custom X-axis title style
textStyle: {color: '#8B8B8B'}, // Custom X-axis text style
gridlines: {color: '#e0e0e0'} // Custom gridline color
},
vAxis: {
title: 'Sales',
titleTextStyle: {color: '#5A5A5A', fontSize: 14}, // Custom Y-axis title style
textStyle: {color: '#8B8B8B'}, // Custom Y-axis text style
gridlines: {color: '#e0e0e0'} // Custom gridline color
},
backgroundColor: '#ffffff', // Custom background color
legend: {
position: 'top', // Position of legend
textStyle: {fontSize: 12, color: '#4E4E4E'} // Custom legend text style
},
colors: ['#76A7FF', '#FF7043', '#4CAF50'] // Custom colors for columns
};
var chart = new google.visualization.ColumnChart(document.getElementById('column_chart'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="column_chart" style="width: 900px; height: 500px;"></div>
</body>
</html>
এখানে:
- chartArea: কাস্টম চার্ট এরিয়া ব্যাকগ্রাউন্ড রঙ এবং আকার।
- hAxis এবং vAxis: অক্ষের রঙ, ফন্ট সাইজ এবং গ্রিডলাইন কাস্টমাইজেশন।
- legend: লেজেন্ডের অবস্থান এবং টেক্সট স্টাইল কাস্টমাইজেশন।
- colors: কলামের রঙ কাস্টমাইজ করা হয়েছে।
৩. গুগল চার্টের থিম কাস্টমাইজেশনের জন্য কিছু অতিরিক্ত অপশন
- fontName: গ্রাফের ফন্ট নাম কাস্টমাইজ করা।
- fontSize: ফন্ট সাইজ কাস্টমাইজ করা।
- lineWidth: লাইন ওয়াইথ কাস্টমাইজ করা।
- titleTextStyle: শিরোনামের ফন্ট এবং রঙ কাস্টমাইজ করা।
- axisTextStyle: অক্ষের টেক্সটের ফন্ট এবং রঙ কাস্টমাইজ করা।
উদাহরণ: Customizing Font and Title Styles
var options = {
title: 'Product Sales',
titleTextStyle: {
fontName: 'Arial', // Custom font name
fontSize: 16, // Font size for title
bold: true, // Bold title
color: 'green' // Title color
},
hAxis: {
title: 'Products',
titleTextStyle: {
fontSize: 14,
color: 'blue',
italic: true // Italic X-axis title
}
},
vAxis: {
title: 'Sales',
titleTextStyle: {
fontSize: 14,
color: 'blue',
italic: true // Italic Y-axis title
}
},
backgroundColor: '#f0f0f0', // Background color
colors: ['#8E44AD', '#F39C12'] // Custom bar colors
};
সারমর্ম
গুগল চার্টে options অবজেক্টের মাধ্যমে আপনি গ্রাফের বিভিন্ন ভিজ্যুয়াল উপাদান কাস্টমাইজ করে একটি custom theme তৈরি করতে পারেন। এখানে আপনি শিরোনাম, অক্ষ, লেজেন্ড, রঙ এবং অন্যান্য স্টাইল কাস্টমাইজ করতে পারবেন। ggplot2-এ যেমন theme() ফাংশন ব্যবহার করে কাস্টম থিম তৈরি করা যায়, গুগল চার্টেও options ব্যবহার করে থিম কাস্টমাইজ করা যায়, যা ডেটা ভিজুয়ালাইজেশনকে আরও পরিষ্কার, আকর্ষণীয় এবং তথ্যপূর্ণ করে তোলে।
Read more
